import * as React from 'react';
import Line from 'echarts-for-react';
import * as echarts from 'echarts';
import {originalList} from './mock';
import styles from './common.less';

export interface NumProps {
  data?: any;
  title?: any;
  selectKeys?: any;
}

const NumBar: React.FC<NumProps> = (props: any) => {
  const {data = [], title, selectKeys = [], isAll = false} = props;
  const temData = [];
  if (data.length) {
    for (const d of data) {
      for (const i of originalList) {
        if (d.code === i.initCode) {
          temData.push({
            ...d,
            name: i.name
          })
        }
      }
    }
  }
  const Xdata = [];
  const Sdata = [];
  const Tdata = [];
  const finalData = selectKeys.length || !isAll ? data : temData;
  if (finalData.length) {
    for (const d of finalData) {
      Xdata.push(d.name);
      Sdata.push(d.ratio ? d.ratio.toFixed(2) : 0);
      Tdata.push(d.median ? d.median.toFixed(2) : 0);
    }
  }
  const axisLabel: any = {
    // interval: isAll && !selectKeys.length && 0,
    textStyle: {
      color: '#83C0FF',
    },
    rotate: isAll && !selectKeys.length ? -30 : 0, // 度角倾斜显示
    formatter(value: any) {
      let ret = ""; // 拼接加\n返回的类目项
      const maxLength = 3;// 每项显示文字个数
      const valLength = value.length; // X轴类目项的文字个数
      const rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
      if (isAll && !selectKeys.length){
        return value
      }
      if (rowN > 1) // 如果类目项的文字大于3,
      {
        for (let i = 0; i < rowN; i += 1) {
          let temp = ""; // 每次截取的字符串
          const start = i * maxLength; // 开始截取的位置
          const end = start + maxLength; // 结束截取的位置
          // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
          temp = `${value.substring(start, end)}\n`;
          ret += temp; // 凭借最终的字符串
        }
        return ret;
      }

      return value;

    }
  };
  if (isAll && !selectKeys.length) axisLabel.interval = 0;
  const option = {
    color: ['#A08A4E', '#5887CA'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#283b56'
        }
      }
    },
    legend: {
      data: ['平均数', '中位数'],
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { // 图例文字的样式
        color: '#83C0FF',
        fontSize: 12
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLabel: {...axisLabel},
        axisLine: {
          lineStyle: {
            color: '#83C0FF'
          },
        },
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Wed', 'Thu', 'Fri'],
        data: Xdata
      },
      {
        show: false,
        type: 'category',
        boundaryGap: true,
        data: []
      }
    ],
    yAxis: [
      {
        name: `单位: ${title === '住院费用' ? '元' : '天'}`,
        nameTextStyle: {
          color: "#83C0FF",
          fontSize: 12,
        },

        type: 'value',
        // inverse: true,
        offset: 1,
        minInterval: 1,
        axisLabel: {
          textStyle: {
            color: '#83C0FF',
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          // show: false,
          lineStyle: {
            type: 'dashed',
            color: '#83C0FF'
          },
        },
      },
      {
        show: false,
        type: 'value',
        scale: true,
        name: '预购量',
        max: 1200,
        min: 0,
        boundaryGap: [0.2, 0.2]
      }
    ],
    grid: {
      top: 30,
      bottom: 100,
      left: 60,
      right: 20,
    },
    series: [
      {
        name: '平均数',
        type: 'bar',
        barWidth: 15,
        // data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110],
        data: Sdata,
        showBackground: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: '#61DBF1'},
            {offset: 0.5, color: '#55ACF3'},
            {offset: 1, color: '#4A84F5'},
          ]),
        },
        // emphasis: {
        //   itemStyle: {
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: '#4A84F5' },
        //       { offset: 0.7, color: '#2378f7' },
        //       { offset: 1, color: '#61DBF1' },
        //     ]),
        //   },
        // },
      },
      {
        name: '中位数',
        type: 'line',
        // data: [60, 100, 75, 40,35, 55, 65, 40, 35, 55]
        data: Tdata
      }
    ]
  };
  return (
    <div className={styles.reportDetailDiv}>
      <div className={styles.headerTitle}>
        <div className={styles.title}>{title}</div>
      </div>
      <div className={styles.tableContent}>
        <Line option={option}/>
      </div>
    </div>
  );
};

export default NumBar;
